<template>
  <div class="common-layout">
    <!-- 修改信息弹出框 -->
    <div>
      <el-drawer ref="drawerRef" v-model="dialog" title="修改个人信息" :before-close="handleClose" direction="ltr"
        custom-class="demo-drawer">
        <div class="demo-drawer__content">
          <el-form :model="form">
            <el-form-item label="昵称" :label-width="formLabelWidth">
              <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="年龄" :label-width="formLabelWidth">
              <el-input v-model="form.age" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="出生日期" :label-width="formLabelWidth">
              <el-input v-model="form.day" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div class="demo-drawer__footer">
            <el-button @click="cancelForm">取 消</el-button>
            <el-button type="primary" :loading="loading" @click="onClick">{{
                loading ? '提交中...' : '提交'
            }}</el-button>
          </div>
        </div>
      </el-drawer>
    </div>
    <!-- 修改密码 -->
    <div>
      <el-dialog v-model="dialogFormVisible" title="修改密码">
        <el-form :model="form">
          <el-form-item label="原密码" :label-width="passwordFormLabelWidth">
            <el-input v-model="passwordForm.oldPassword" autocomplete="off" />
          </el-form-item>
          <el-form-item label="新密码" :label-width="passwordFormLabelWidth">
            <el-input v-model="passwordForm.password" autocomplete="off" />
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取消</el-button>
            <el-button type="primary" @click="dialogFormVisible = false">
              确定
            </el-button>
          </span>
        </template>
      </el-dialog>
    </div>
    <!-- 左侧 -->
    <el-container>
      <el-aside :width='asideWidth'>
        <div class="logo">
          <el-image :src="logo" style="width: 48px; height: 43px"></el-image>
          <h4 v-show="isShowTitle">后台管理系统</h4>
        </div>
        <p class="home-title"><router-link to="index" style="text-decoration:none;">首页</router-link></p>

        <!-- 侧栏 -->
        <el-row class="tac" style="width:177px">
          <el-col :span="12" style="width:177px">
            <el-menu active-text-color="#ffd04b" background-color="#c6e2ff" class="el-menu-vertical-demo"
              text-color="#000" style="width: 170px;" :collapse="!collapse">
              <el-sub-menu index="1">
                <template #title>
                  <el-icon>
                    <location />
                  </el-icon>
                  <span>用户管理</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="1-2"><router-link to="userRegister" style="text-decoration:none;">用户注册</router-link></el-menu-item>
                  <el-menu-item index="1-2"><router-link to="patientManagement" style="text-decoration:none;">用户管理</router-link></el-menu-item>
                </el-menu-item-group>
              </el-sub-menu>
              <el-sub-menu index="2">
                <template #title>
                  <el-icon>
                    <location />
                  </el-icon>
                  <span>通知管理</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="2-1"><router-link to="appointmentFor" style="text-decoration:none;">预约记录管理</router-link></el-menu-item>
                  <el-menu-item index="2-2"><router-link to="noticeInformation" style="text-decoration:none;">通知消息管理</router-link></el-menu-item>
                </el-menu-item-group>
              </el-sub-menu>
              <el-sub-menu index="3">
                <template #title>
                  <el-icon>
                    <location />
                  </el-icon>
                  <span><router-link to="banner" style="text-decoration:none;">轮播管理</router-link></span>
                </template>
              </el-sub-menu>
              <el-sub-menu index="4">
                <template #title>
                  <el-icon>
                    <location />
                  </el-icon>
                  <span>医师管理</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="4-1"><router-link to="doctorRegister" style="text-decoration:none;"> 医师注册</router-link></el-menu-item>
                  <el-menu-item index="4-2"><router-link to="doctorManagement" style="text-decoration:none;">医师管理</router-link></el-menu-item>
                </el-menu-item-group>
              </el-sub-menu>
              <el-sub-menu index="5">
                <template #title>
                  <el-icon>
                    <location />
                  </el-icon>
                  <span>日志管理</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="5-1"><router-link to="addLog" style="text-decoration:none;">添加日志</router-link></el-menu-item>
                  <el-menu-item index="5-2"><router-link to="searchLog" style="text-decoration:none;">查看日志</router-link></el-menu-item>
                </el-menu-item-group>
              </el-sub-menu>
            </el-menu>
          </el-col>
        </el-row>
      </el-aside>
      <!-- 菜单 -->
      <el-container>
        <!-- 页头 -->
        <el-header>
          <el-icon style="font-size: 30px;color: black;" @click="onFlod" :collapse="collapse" >
            <component :is="headerLeft" text-color="#4e4f51"></component>
            <Expand />
          </el-icon>
          <div class="demo-type">
            <span class="title">欢迎您 &emsp;{{ adminObj.nickname }}</span>
            <el-dropdown trigger="click">
              <el-avatar :size="30" :src="adminObj.headerimg" />
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>
                    <el-button text @click="dialog = true">修改个人信息</el-button>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-button text @click="dialogFormVisible = true">
                      修改密码
                    </el-button>
                  </el-dropdown-item>
                  <el-dropdown-item @click="onExit">退出</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </el-header>
        <!-- 主界面 -->
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import {
  Location,
  Expand
} from '@element-plus/icons-vue'
import router from '@/router'

import { RouterView } from 'vue-router';
import { ElDrawer, ElMessageBox, ElForm, ElFormItem, ElInput, ElButton, ElContainer, ElAside, ElImage, ElRow, ElCol, ElMenu, ElSubMenu, ElIcon, ElMenuItemGroup, ElMenuItem, ElHeader, ElDropdown, ElAvatar, ElDropdownMenu, ElDropdownItem, ElMain } from 'element-plus';
// import drawer from 'element-plus/es/components/drawer';
const logo = ref('../../public/logo.jpg')
let url = ref('https://pro.upload.logomaker.com.cn/2022/07/2207200941232715.png?x-oss-process=image/resize,m_lfit,w_700,h_0')
const admin = sessionStorage.getItem('admin')
// let adminObj = JSON.parse(admin as string)
let adminObj = JSON.parse(<string>admin)
// 退出
const onExit = () => {
  sessionStorage.removeItem('admin')
  router.replace({ path: "/adminLogin" })
}


// 修改个人信息
let form = reactive(
  {
    name: '',
    age: '',
    day: '',
    delivery: false,
    type: [],
    resource: '',
    desc: ''
  },
)
let formLabelWidth = ref('80px')
let timer: number
const dialog = ref(false)
const loading = ref(false)

const drawerRef = ref<InstanceType<typeof ElDrawer>>()
const onClick = () => {
  drawerRef.value!.close()
}

const handleClose = (done: any) => {
  if (loading.value) {
    return
  }
  ElMessageBox.confirm('确定提交吗?')
    .then(() => {
      loading.value = true
      timer = setTimeout(() => {
        done()
        // 动画关闭需要一定的时间
        setTimeout(() => {
          loading.value = false
        }, 400)
      }, 2000)
    })
    .catch(() => {
      // catch error
    })
}
const cancelForm = () => {
  loading.value = false
  dialog.value = false
  clearTimeout(timer)
}
// 修改密码
const dialogTableVisible = ref(false)
const dialogFormVisible = ref(false)
const passwordFormLabelWidth = '140px'

const passwordForm = reactive({
  oldPassword: "",
  password: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})
// 折叠
let asideWidth = ref('210px')
let collapse=ref(true)
  let headerLeft=ref('Fold')
  let isShowTitle=ref(true)

  const onFlod=()=>{
			collapse.value = !collapse.value
			asideWidth.value = collapse.value ? '210px' : '70px'
			headerLeft.value = collapse.value ? 'Fold' : 'Expand'
			isShowTitle.value = collapse.value
		}
</script>

<style lang="less" scoped>
.el-container {
  width: 100%;
  height: 100vh;

  .el-aside {
    background-color: #c6e2ff;
    // transition: .3s;
    color: black;
    text-align: right;
    padding: 10px;

    .logo {
      display: flex;
      color: black;
      align-items: center;
      height: 50px;

      h4 {
        margin-left: 10px;
      }

      el-menu {
        background-color: #4e4f51, 0;
      }
    }

    .home-title {
      width: 40px;
      padding-right: 123px;
      color: rgb(202, 158, 26);
      text-decoration: none;
    }

    .el-menu {
      border-right: 0;
      width: 170px;

      el-sub-menu {
        color: black;
        width: 170px;

        el-menu-item {
          width: 170px;
        }
      }
    }
  }

  .el-container {
    width: 100vm;

    .el-header {
      background-color: #D9ECFF;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .title {
        margin-right: 10px;
        // line-height: 60px;
        display: inline-block;
        margin-top: 5px;
      }
    }
  }
}
</style>